<template>
  <div class="container">
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swiperList" :key="item.id">
        <img :src="item.img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 九宫格 -->
    <van-grid :border="false" :column-num="3">
      <van-grid-item to="/newslist">
        <img src="../assets/images/menu1.png" />
        <p>新闻资讯</p>
      </van-grid-item>
      <van-grid-item to="/photo/list">
        <img src="../assets/images/menu2.png" />
        <p>图片分享</p>
      </van-grid-item>
      <van-grid-item to="/goods/list">
        <img src="../assets/images/menu3.png" />
        <p>商品购买</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/images/menu4.png" />
        <p>留言反馈</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/images/menu5.png" />
        <p>视频专区</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/images/menu6.png" />
        <p>联系我们</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 首页轮播图
      swiperList: []
    }
  },
  created() {
    this.getSwiper()
  },
  methods: {
    async getSwiper() {
      const { data: res } = await this.$http.get('/api/getlunbo')
      if (res.status !== 0) {
        return this.$toast('服务器异常!')
      }
      this.swiperList = res.message
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  .van-swipe {
    height: 200px;
    background-color: #eee;
    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
  .van-grid-item {
    width: 33.3333333%;
    img {
      width: 50px;
    }
  }
}
</style>
